<template>
  <div id="homePage">
    <header id="nav">
      <div class="nav">
        <span
          class="span"
          v-for="(item, index) in navList"
          :key="index"
          @click="mainChoose(index)"
          :class="[num == index ? 'active' : '']"
        >
          <span>{{ item.value }}</span>
          <i v-show="index == 3 || index == 4"></i>
        </span>
      </div>
    </header>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

<script>
export default {
  name: "homePage",
  data() {
    return {
      // 默认
      num: 0,
      navList: [
        {
          num: 0,
          value: "首页",
        },
        // {
        //   num: 1,
        //   value: "排行榜",
        // },
        {
          num: 1,
          value: "歌单",
        },
        // {
        //   num: 2,
        //   value: "主播电台",
        // },
        {
          num: 2,
          value: "歌手",
        },
        {
          num: 3,
          value: "新碟上架",
        },
        {
          num: 4,
          value: "新歌速递",
        },
      ],
    };
  },
  methods: {
    // 选择首页内容
    mainChoose(index) {
      this.num = index;
      switch (this.num) {
        case 0:
          this.$router.replace("/homePage/recommend");
          break;
        case 1:
          this.$router.replace("/homePage/gedan");
          break;
        case 2:
          this.$router.replace("/homePage/singer");
          break;
        case 3:
          this.$router.replace("/homePage/newAudio");
          break;
        default:
          this.$router.replace("/homePage/newSing");
          break;
      }
    },
  },
};
</script>

<style scoped>
header {
  border-bottom: 2px solid rgb(255, 165, 0);
  display: flex;
  justify-content: center;
}

.nav .span {
  position: relative;
  cursor: pointer;
  display: inline-block;
  display: inline-block;
  width: 120px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.nav .span i {
  position: absolute;
  top: 0;
  right: 0;
  width: 45px;
  height: 50px;
  background: url("../../assets/ing.png") no-repeat;
  background-size: 50px;
  background-position: 0 -5px;
}

.active {
  color: rgb(255, 165, 0);
}
</style>